<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Emp表的案例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div id="d1">
    <h3>添加员工</h3>
    姓名：<input type="text" id="name">&nbsp;&nbsp;&nbsp;
    职位：<input type="text" id="job">&nbsp;&nbsp;&nbsp;
    上司ID：<input type="text" id="mgr"><br/>
    入职时间：<input type="date" id="hiredate">&nbsp;&nbsp;&nbsp;
    工资：<input type="text" id="sal">&nbsp;&nbsp;&nbsp;
    奖金：<input type="text" id="comm"><br/>
    <button type="button" class="btn btn-primary" onclick="saveEmp()">添加</button>
</div>
<table class="table table-striped">
    <thead>
    <tr>
        <th scope="col">编号</th>
        <th>姓名</th>
        <th>职位</th>
        <th>上司ID</th>
        <th>入职时间</th>
        <th>工资</th>
        <th>奖金</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>
</table>
<div id="showEmpDiv" style="display: none;margin: auto;text-align: center">
    <h3>员工详情</h3>
    编号：<span id="empId"></span>&nbsp;&nbsp;&nbsp;
    姓名：<span id="empName"></span>&nbsp;&nbsp;&nbsp;
    职位：<span id="empJob"></span>&nbsp;&nbsp;&nbsp;
    上司ID：<span id="empMgr"></span><br>
    入职时间：<span id="empHiredate"></span>
    工资：<span id="empSal"></span>
    奖金：<span id="empComm"></span><br>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-s1swLUYcLBqAXHj7nWZcBD03oDfaVT4TaOQEaQGnSa65SsyckDHTlfGcB8+LOLkz"
        crossorigin="anonymous"></script>
<script>
    // 模拟一些假数据
    let data = [
        {id: 1, name: '张三', job: '经理', mgr: null, hiredate: '2023-01-01', sal: 5000, comm: 1000},
        {id: 2, name: '李四', job: '员工', mgr: 1, hiredate: '2023-01-02', sal: 3000, comm: 500},
        {id: 3, name: '王五', job: '员工', mgr: 1, hiredate: '2023-01-03', sal: 3000, comm: 500},
        {id: 4, name: '赵六', job: '员工', mgr: 2, hiredate: '2023-01-04', sal: 3000, comm: 500},
        {id: 5, name: '钱七', job: '员工', mgr: 2, hiredate: '2023-01-05', sal: 3000, comm: 500},
        {id: 6, name: '孙八', job: '员工', mgr: 3, hiredate: '2023-01-06', sal: 3000, comm: 500},
    ]
    onload = function () {
        let tbody = document.getElementById('tbody');
        for (let i = 0; i < data.length; i++) {
            let obj = data[i];
            let tr = document.createElement('tr');
            let td1 = document.createElement('td');
            let td2 = document.createElement('td');
            let td3 = document.createElement('td');
            let td4 = document.createElement('td');
            let td5 = document.createElement('td');
            let td6 = document.createElement('td');
            let td7 = document.createElement('td');
            let td8 = document.createElement('td');
            td1.innerText = obj.id;
            td2.innerText = obj.name;
            td3.innerText = obj.job;
            td4.innerText = obj.mgr;
            td5.innerText = obj.hiredate;
            td6.innerText = obj.sal;
            td7.innerText = obj.comm;
            td8.innerHTML = '<button  type="button" class="btn btn-primary" onclick="showEmp(this)">查看</button>' +
                '&nbsp;&nbsp;<button type="button" class="btn btn-primary" onclick="updateEmp(this)">修改</button>' +
                '&nbsp;&nbsp;<button type="button" class="btn btn-primary" onclick="removeEmp(this)">删除</button>';
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);
            tr.appendChild(td6);
            tr.appendChild(td7);
            tr.appendChild(td8);
            tbody.appendChild(tr);
        }

    }

    function showEmp(obj) {
        let showEmpDiv = document.getElementById('showEmpDiv');
        showEmpDiv.style.display = 'block';
        let tds = obj.parentElement.parentElement.children;
        document.getElementById('empId').innerText = tds[0].innerText;
        document.getElementById('empName').innerText = tds[1].innerText;
        document.getElementById('empJob').innerText = tds[2].innerText;
        document.getElementById('empMgr').innerText = tds[3].innerText;
        document.getElementById('empHiredate').innerText = tds[4].innerText;
        document.getElementById('empSal').innerText = tds[5].innerText;
        document.getElementById('empComm').innerText = tds[6].innerText;
    }

    function removeEmp(obj) {
        if (confirm('你确定要删除么？')) {
            let tr = obj.parentElement.parentElement;
            let tbody = tr.parentElement;
            tbody.removeChild(tr);
        }
    }

    let isUpdate = true;

    function updateEmp(obj) {
        if (isUpdate) {
            isUpdate = false;
            let nowTr = obj.parentElement.parentElement;
            let nowTds = nowTr.children;
            let nowId = nowTds[0].innerText;
            let nowName = nowTds[1].innerText;
            let nowJob = nowTds[2].innerText;
            let nowMgr = nowTds[3].innerText;
            let nowHiredate = nowTds[4].innerText;
            let nowSal = nowTds[5].innerText;
            let nowComm = nowTds[6].innerText;
            nowTds[1].innerHTML = '<input type="text" value="' + nowName + '"/>';
            nowTds[2].innerHTML = '<input type="text" value="' + nowJob + '"/>';
            nowTds[3].innerHTML = '<input type="text" value="' + nowMgr + '"/>';
            nowTds[4].innerHTML = '<input type="date" value="' + nowHiredate + '"/>';
            nowTds[5].innerHTML = '<input type="text" value="' + nowSal + '"/>';
            nowTds[6].innerHTML = '<input type="text" value="' + nowComm + '"/>';
        } else {
            isUpdate = true;
            let nowTr = obj.parentElement.parentElement;
            let nowTds = nowTr.children;
            let nowId = nowTds[0].innerText;
            let nowName = nowTds[1].children[0].value;
            let nowJob = nowTds[2].children[0].value;
            let nowMgr = nowTds[3].children[0].value;
            let nowHiredate = nowTds[4].children[0].value;
            let nowSal = nowTds[5].children[0].value;
            let nowComm = nowTds[6].children[0].value;
            nowTds[1].innerText = nowName;
            nowTds[2].innerText = nowJob;
            nowTds[3].innerText = nowMgr;
            nowTds[4].innerText = nowHiredate;
            nowTds[5].innerText = nowSal;
            nowTds[6].innerText = nowComm;
        }
    }

    function saveEmp() {
        let name = document.getElementById('name').value;
        let job = document.getElementById('job').value;
        let mgr = document.getElementById('mgr').value;
        let hiredate = document.getElementById('hiredate').value;
        let sal = document.getElementById('sal').value;
        let comm = document.getElementById('comm').value;
        let tbody = document.getElementById('tbody');
        let tr = document.createElement('tr');
        let td1 = document.createElement('td');
        let td2 = document.createElement('td');
        let td3 = document.createElement('td');
        let td4 = document.createElement('td');
        let td5 = document.createElement('td');
        let td6 = document.createElement('td');
        let td7 = document.createElement('td');
        let td8 = document.createElement('td');
        td2.innerText = name;
        td3.innerText = job;
        td4.innerText = mgr;
        td5.innerText = hiredate;
        td6.innerText = sal;
        td7.innerText = comm;
        td8.innerHTML = '<button  type="button" class="btn btn-primary" onclick="showEmp(this)">查看</button>' +
            '&nbsp;&nbsp;<button type="button" class="btn btn-primary" onclick="updateEmp(this)">修改</button>' +
            '&nbsp;&nbsp;<button type="button" class="btn btn-primary" onclick="removeEmp(this)">删除</button>';
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tr.appendChild(td5);
        tr.appendChild(td6);
        tr.appendChild(td7);
        tr.appendChild(td8);
        tbody.appendChild(tr);
        let prevTr = tr.previousElementSibling
        if (prevTr === undefined || prevTr === null) {
            td1.innerText = 1 + '';
        } else {
            let prevTds = prevTr.children;
            let id = prevTds[0].innerText;
            td1.innerText = parseInt(id) + 1 + '';
        }
    }
</script>